import React,{useState} from 'react'
import {useNavigate} from 'react-router-dom'

export default function Menu() {
 const nav=useNavigate()
 const [menuData]=useState([
    {
        id:0,
        name:'运营',
        children:[
            {
                id:'01',
                name:'控制台',
                path:'dashboard'
            }
        ]
    },
    {
      id:1,
      name:'商品',
      children:[
        {
            id:11,
            name:'商品管理',
            path:'productMgr'
        },
        {
            id:12,
            name:'商品分类',
            path:'productCate'
        },
        {
            id:13,
            name:'商品的评论',
            path:'productComment'
        }
      ]  
    },
    {
        id:2,
        name:'用户',
        children:[
            {
                id:21,
                name:'用户管理',
                path:'userMgr'
            },
            {
                id:22,
                name:'用户标签',
                path:'userLabel'
            },
            {
                id:23,
                name:'用户等级',
                path:'userLevel'
            }
        ]
    }
 ])
const routerGo=(path)=>{
    nav(`/home/${path}`)
}
  return (
    
    <div>
        <div style={{color:'#fff',marginLeft:'20px'}}>
           <ul>
              {menuData.map(item=><li key={item.id}>
                 <div>{item.name}</div>
                 <ul>                 {
                    item.children&&item.children.length>0&&item.children.map(sitem=><li style={{marginLeft:'10px'}} key={sitem.id}>
                        <div onClick={()=>routerGo(sitem.path)}>{sitem.name}</div>
                    </li>)
                 }
                 </ul>

              </li>)}
           </ul>
        </div>
    </div>
  )
}
